React编写简单的评论功能

2024-07-16 18:08| 来源: 网络整理| 查看: 265

一效果展示

二代码 2.1 a.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css' class App extends React.Component{ //创建一个组件，是react中的组件，所以在之前必须要引入react state={ message:"请发表评论", list:[] } changeValue=(e)=>{ console.log(e.target) this.setState({ message:e.target.value }) } delContent=(index)=>{ this.state.list.splice(index,1) this.setState({//更新 list:this.state.list // message:"" }) } addContent=()=>{ this.state.list.push({ id:this.state.list[this.state.list.length-1]?this.state.list[this.state.list.length-1].id+1:1, content:this.state.message }) this.setState({ list:this.state.list, message:"" }) } render() { //组件渲染，这是必须有的 return ( 评论区评论精彩评论 { this.state.list.map((item)=>{ return( //return也是必须要包含的，js对象 {item.content} 删除 ) }) } ); } } export default App 2.2 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./a"; ReactDOM.render(,document.getElementById("root")) 2.3 index.css .one{ position: relative; left:120%; top:-22px; color:black; } .two{ color:black; } .three{ position: absolute; left:20%; } h1{ color: black; font-size: 32px; } 三代码解析 3.1 a.js

是一个React组件，使用了ES6的类语法来定义组件。该组件名为App。

在组件中，使用了state来存储组件的数据，包括message和list。message存储输入框的值，list存储评论内容。

在render方法中，将组件的结构渲染出来。包括一个输入框和一个评论区。

在输入框中，绑定了一个onChange事件，当输入框的值发生变化时，会调用changeValue方法来更新state中的message值。这样实现了实时更新输入框的值。

在评论区中，使用了map方法遍历state中的list，将每个评论内容渲染成一个li元素。同时给每个li元素设置一个key属性，以便React能够准确追踪每个元素的变化。

每个li元素中包含评论内容和一个删除按钮。点击删除按钮时，调用delContent方法来删除对应的评论。

最后，将App组件导出供其他模块(index.jsp)使用。

3.2 index.js

在React中渲染App组件，并将其挂载到HTML页面的根节点上。

首先，导入React和ReactDOM模块。

然后，导入了App组件，路径为"./a"。

接着，调用ReactDOM.render方法，将组件作为参数传入，并指定要挂载的目标元素为document.getElementById("root")，即HTML页面中具有id为"root"的元素。

这样，App组件就会被渲染并挂载到页面上的根节点中。

3.3 index.css

CSS样式的定义，用于给App组件中的元素添加样式。

.one类的样式： `position: relative;` 设置元素的定位方式为相对定位。 `left: 120%;` 将元素相对于其正常位置向右移动120%的距离。 `top: -22px;` 将元素相对于其正常位置向上移动22像素的距离。 `color: black;` 设置文本颜色为黑色。

.two类的样式： `color: black;` 设置文本颜色为黑色。

.three类的样式： `position: absolute;` 设置元素的定位方式为绝对定位。 `left: 20%;` 将元素相对于其最近的非静态定位祖先元素向右移动20%的距离。这个样式类没有提供其他样式。

h1元素的样式： `color: black;` 设置标题文本颜色为黑色。 `font-size: 32px;` 设置标题的字体大小为32像素。

四 a.js详细解析 4.1 state={ message:"请发表评论", list:[] } 这段代码定义了App组件的初始状态（state）。App组件的state包含两个属性： `message`: 初始值为"请发表评论"，用于存储用户输入的评论内容。 `list`: 初始值为空数组，用于存储评论列表的数据。这个初始状态将用于在组件渲染时进行显示和修改。 4.2 changeValue=(e)=>{ console.log(e.target) this.setState({ message:e.target.value }) }

这段代码定义了一个名为`changeValue`的函数，该函数是一个事件处理函数，用于处理输入框的值改变事件（onChange）。

当用户输入框的值发生改变时，该函数会被调用，并且会将输入框的新值（`e.target.value`）更新到组件的state中的`message`属性中。

通过调用`setState`方法来更新state，会触发组件的重新渲染，从而反映出最新的输入框的值的改变。

4.3 delContent=(index)=>{ this.state.list.splice(index,1) this.setState({//更新 list:this.state.list // message:"" }) }

这段代码定义了一个名为`delContent`的函数，该函数用于删除列表中的某一项。

函数接受一个参数`index`，表示要删除的项在列表中的索引。

首先，使用`splice`方法从`this.state.list`中删除指定索引的项，即`this.state.list.splice(index, 1)`。

然后，通过调用`setState`方法来更新state，将删除后的新列表赋值给`list`属性，从而触发组件的重新渲染，反映出删除后的最新状态。

4.4 addContent=()=>{ this.state.list.push({ id:this.state.list[this.state.list.length-1]?this.state.list[this.state.list.length-1].id+1:1, content:this.state.message }) this.setState({ list:this.state.list, message:"" }) }

这段代码定义了一个名为`addContent`的函数，该函数用于向列表中添加新的项。

首先，使用`push`方法向`this.state.list`中添加新的项。

新的项是一个包含`id`和`content`属性的对象。

`id`属性的值是列表中最后一项的`id`加1，如果列表为空则设置为1。

`content`属性的值是`this.state.message`，即当前的输入框内容。

然后，通过调用`setState`方法来更新state，将添加后的新列表赋值给`list`属性，并将`message`属性重置为空字符串，从而触发组件的重新渲染，反映出添加后的最新状态。

4.5 button onClick={this.addContent} className={'one'} >评论

这段代码是一个包含一个输入框和一个按钮的 JSX 元素。它使用``标签来渲染一个文本输入框，并设置了以下属性：

`type`：设置输入框的类型为文本类型； `value`：将输入框的值绑定到`this.state.message`，即显示`this.state.message`作为输入框的初始值； `placeholder`：设置输入框的占位符文本为"请发表评论"； `onChange`：绑定`this.changeValue`函数作为输入框的`change`事件的处理函数。

这段代码还包含一个``标签，它使用了以下属性：

`onClick`：将`this.addContent`函数绑定到按钮的`click`事件，即点击按钮时触发`this.addContent`函数的执行； `className`：设置按钮的类名为"one"，用于自定义样式； `children`：将一个包含文本内容的``标签作为按钮的子元素，显示"评论"作为按钮的文本内容。

4.6 this.state.list.map((item)=>{ return( //return也是必须要包含的，js对象 {item.content} 删除 ) })

这段代码是使用`this.state.list.map()`方法对`this.state.list`数组进行遍历，然后根据数组中的每个元素创建一个``元素。在``元素中，包含一个显示`item.content`的``元素和一个带有"删除"文本的按钮。

在每次循环时，都会为``元素设置一个`key`属性，使用`item.id`作为唯一标识。这是为了帮助React识别每个元素的唯一性，并进行高效的更新。

按钮的点击事件`onClick`被绑定到`this.delContent`函数，即点击按钮时触发`this.delContent`函数的执行。按钮的类名设置为"two"，用于自定义样式。

最后，通过使用`return`关键字将每个创建的``元素返回，并作为整个遍历结果的一部分。这样，遍历结果会被渲染到页面上。

【本文地址】

公司简介

联系我们